<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ include file="/WEB-INF/jsp/common/header.jsp" %>

<div class="row">
    <div class="col-12">
        <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">热门博客排行榜</h5>
            </div>
            <div class="card-body">
                <c:choose>
                    <c:when test="${not empty blogList}">
                        <div class="list-group">
                            <c:forEach var="blog" items="${blogList}" varStatus="status">
                                <a href="${pageContext.request.contextPath}/blog/view?id=${blog.id}" class="list-group-item list-group-item-action">
                                    <div class="row align-items-center">
                                        <div class="col-1 text-center">
                                            <div class="badge ${status.index < 3 ? 'bg-danger' : 'bg-secondary'} fs-5 p-2">
                                                ${status.index + 1}
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <h5 class="mb-1">${blog.title}</h5>
                                            <p class="mb-1 text-truncate">
                                                ${blog.content.replaceAll("#", "").replaceAll("\\*", "").replaceAll("`", "")}
                                            </p>
                                            <div>
                                                <span class="badge bg-${blog.category == '技术' ? 'primary' : 
                                                                blog.category == '生活' ? 'success' : 
                                                                blog.category == '旅游' ? 'info' : 
                                                                blog.category == '艺术' ? 'warning' : 'secondary'} me-2">
                                                    ${blog.category}
                                                </span>
                                                <small class="text-muted">
                                                    <i class="fas fa-user me-1"></i>${blog.authorName}
                                                </small>
                                                <small class="text-muted ms-2">
                                                    <i class="fas fa-calendar me-1"></i>
                                                    <fmt:formatDate value="${blog.createTime}" pattern="yyyy-MM-dd" />
                                                </small>
                                            </div>
                                        </div>
                                        <div class="col-md-3 text-end">
                                            <div class="text-danger fw-bold">
                                                <i class="fas fa-fire me-1"></i>
                                                <span class="fs-4">${blog.viewCount}</span> 
                                                <span class="fs-6">阅读</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </c:forEach>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <div class="alert alert-info text-center">
                            <p class="mb-0">暂无热门博客</p>
                            <a href="${pageContext.request.contextPath}/blog/list" class="btn btn-primary mt-3">
                                <i class="fas fa-home me-1"></i>返回首页
                            </a>
                        </div>
                    </c:otherwise>
                </c:choose>
            </div>
        </div>
        
        <div class="text-center mb-4">
            <a href="${pageContext.request.contextPath}/blog/list" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left me-1"></i>返回首页
            </a>
        </div>
    </div>
</div>

<%@ include file="/WEB-INF/jsp/common/footer.jsp" %> 